<template>
  <div :class="{
    'custom-title': true,
    'custom-title-dark': isDarkTheme,
    'custom-title-light': !isDarkTheme,
  }">
    <span class="title-text">{{ title }}</span>
    <div class="btn-box">
      <!-- <el-button type="primary" size="mini">刷新</el-button> -->
     <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    pageConfig: Object
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  }

}
</script>

<style lang="less" scoped>
.custom-title {
  height: 35px;
  color: #fff;
  padding: 0 0 0 3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title-text {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    text-shadow: 0 2px 8px #051c376b, 0 0 7px #4bb4e5b0;
    font-family: "YouSheBiaoTiHei";
  }
}
.custom-title-dark {
  background: url("../css/title-bg-dark.png") no-repeat;
  background-size: 100% 100%;
}
  
// 2K
@media screen and (max-width: 2560px) {
  .custom-title {
    height: 55px;
    .title-text {
      font-size: 28px;
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .custom-title {
    height: 35px;
    .title-text {
      font-size: 20px;
    }
  }

}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
</style>